<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<style>
</style>
<div class="r_location">
	<i class="r_txtico"></i> 微信内容管理 &gt; 奖品管理 &gt; 新增奖品
</div>
<form id="add_func_form"  method="post" enctype="multipart/form-data" action="cms/prize/add">
	<input  type="hidden" id="changeCondition"   name="changeCondition" />
	<ul class="all_list">
	    <li>
             <span class="all_title">奖品等级:</span>
             <span>
                  <select name="prizeType" id="prizeType" class="ui_input"  >
                      <option value="public" selected="selected">普通奖品</option>
                      <option value="one">一等奖</option>
                  </select>
             </span>
             <span class="all_title">是否显示:</span>
             <span>
                  <select name="status" id="status" validator='{"label":"显示状态"}'>
						<option value="">请选择</option>
						<option value="2">显示</option>
						<option value="1">不显示</option>
				 </select>
             </span>
          <div class="span12 field-box" data-id="one">
			<span class="all_title">一等奖条件：</span>
			<span>
				<select name="changeConditionStr" >
				   <option value="1">活动最后一天且排名第一</option>
				</select>
			</span>
		  </div>
        </li>
		<li>
			<span class="all_title">奖品名称：</span>
			<span>
				<input class="ui_input" id="prizeName" style="width:200px;"  name="prizeName"  validator='{"label":"奖品名称","minLength":2,"maxLength":20}'  >
			</span>
			<span class="all_title">奖品总数：</span>
			<span>
				<input class="ui_input" id="buyTotal" validator='{"label":"奖品总数","isDigit":true,"minLength":1,"maxLength":8}'  style="width:200px;"  name="buyTotal" />
			</span>
		</li>
		<li>
			<span class="all_title">每个需要金币：</span>
			<span>
				<input class="ui_input" id="buyMaterial" style="width:200px;"  name="buyMaterial" validator='{"label":"每份需要金币","isDigit":true,"minLength":1,"maxLength":8}'   />
			</span>
			<span class="all_title">奖品排序：</span>
			<span>
				<input class="ui_input" id="showIndex" style="width:200px;"  name="showIndex" validator='{"label":"奖品排序","isDigit":true,"minLength":1,"maxLength":8}'   />
			</span>
		</li>
		<li>
			<span class="all_title">每人可换数：</span>
			<span>
				<input class="ui_input" id="maxBuyNum" style="width:200px;"  name="maxBuyNum"  validator='{"label":"每人可换数","isDigit":true,"minLength":1,"maxLength":5}' />
			</span>
			<span class="all_title">奖品剩余数：</span>
			<span>
				<input class="ui_input" id="remaTotal" style="width:200px;"  name="remaTotal"   validator='{"label":"剩余数量","isDigit":true,"minLength":1,"maxLength":8}' />
			</span>
		</li>
		<li>
			<span class="all_title">奖品小图：</span>
			<span><input multiple type="file"   name="prizeImages"  onchange="previewImage(this)"></span>
		</li>
		<li>
			<span class="all_title"></span>
			<span id="preview"><img id="imghead" border=0 src="" width="100" height="70" /></span>
		</li>
		<li>
			<span class="all_title">奖品大图：</span>
			<span><input multiple type="file"    name="prizeImages"  onchange="previewBigImage(this)"></span>
		</li>
		<li>
			<span class="all_title"></span>
			<span id="preBigview"><img id="imgBighead" border=0 src="" width="100" height="70" /></span>
		</li>
		<li>
			<span class="all_title">奖品描述：</span>
			<span>
				<textarea rows="3" cols="80" name="prizeDesc"  validator='{"label":"奖品描述","minLength":2,"maxLength":200}'   id="prizeDesc"></textarea>
			</span>
		</li>
		<li>
			<span class="all_title"></span>
			<span>
				<input type="button" id="save_button" value="提 交" class="submit_btn m-r15 submitBtn">
			</span>
		</li>
	</ul>
</form>
<script type="text/javascript">

function previewImage(file)
{
	var MAXWIDTH  = 100;
	var MAXHEIGHT = 70;
	var div = document.getElementById('preview');
	if (file.files && file.files[0])
	{
		div.innerHTML ='<img id=imghead>';
		var img = document.getElementById('imghead');
		img.onload = function(){
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
			img.width  =  rect.width;
			img.height =  rect.height;
//  img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top+'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt){img.src = evt.target.result;}
		reader.readAsDataURL(file.files[0]);
	}
	else //兼容IE
	{
		var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=imghead>';
		var img = document.getElementById('imghead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
		status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}

function previewBigImage(file)
{
	var MAXWIDTH  = 100;
	var MAXHEIGHT = 70;
	var div = document.getElementById('preBigview');
	if (file.files && file.files[0])
	{
		div.innerHTML ='<img id=imgBighead>';
		var img = document.getElementById('imgBighead');
		img.onload = function(){
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
			img.width  =  rect.width;
			img.height =  rect.height;
//  img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top+'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt){img.src = evt.target.result;}
		reader.readAsDataURL(file.files[0]);
	}
	else //兼容IE
	{
		var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=imgBighead>';
		var img = document.getElementById('imgBighead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
		status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}

	$(function(){
		      
		function showDialog(url, options) {
			myDialog = art.dialog(options);// 初始化一个带有loading图标的空对话框
			$.post(url, options.param, function(data) {
				myDialog.content(data);
			});
		}
		
		$("#prizeType").change(function(){
			var prizeType = $("#prizeType").val();
			if(prizeType == "one"){
				$("#changeCondition").val("1");
				$(document).find("div[data-id='one']").css("display","");
			}else{
				$("#changeCondition").val("0");
				$(document).find("div[data-id='one']").css("display","none");
			}
		});
		$("#prizeType").change();
		
		$("#add_func_form").validator({},{
			callback:function(result){
				 // 校验相关的图片是否为空
				if ($('#add_func_form input[name="prizeImages"]').filter('[value!=""]').size() == 0) {
					art.dialog({icon: 'error',content: '相关的图片不能为空',lock:true});
					return false;
				}
				
				// 校验图片后缀
				var pattern = /\.jpg$|\.jpeg$|\.gif$|\.bmp$|\.png$/i;
				var validate = true;
				$('#add_func_form input[name="prizeImages"]').filter('[value!=""]').each(function(){
					if (!pattern.test($(this).val())) {
						validate = false;
						return false;
					}
				});				
				if (!validate) {
					art.dialog({icon: 'error',content: '图片格式不正确, 只能上传图片格式: .jpg, .jpeg, .gif, .bmp, .png',lock:true});
					return false;
				} 
				var myLodingDialog = art.dialog({icon: 'loading',content: '数据保存中...',lock:true});
				$("#add_func_form").ajaxSubmit(function(data){
					myLodingDialog.close();
					if (data.success == 'succeed') {
						art.dialog({icon: 'succeed',content: '保存成功',lock:true}).time();
						to_page('/cms/prize/view/page');
					} else {
						art.dialog({icon: 'error',content: data.message,lock:true});
					}
				});
			}
		});
	});
</script>